<template>
  <div v-show="visible" :style="position" class="node-context-menu">
    <div class="menu-item" @click="$emit('change-node')">
      更改节点
    </div>
    <div v-if="nodeType !== 'start' && nodeType !== 'end' && nodeType !== 'loop-start'" class="menu-item" @click="$emit('copy')">
      拷贝
      <span class="shortcut">Ctrl+C</span>
    </div>
    <div v-if="nodeType !== 'start' && nodeType !== 'end' && nodeType !== 'loop-start'" class="menu-item" @click="$emit('duplicate')">
      复制
      <span class="shortcut">Ctrl+D</span>
    </div>
    <div v-if="nodeType !== 'start' && nodeType !== 'end' && !undeletable && nodeType !== 'loop-start'" class="menu-item delete" @click="$emit('delete')">
      删除
      <span class="shortcut">Del</span>
    </div>
    
    <div class="menu-item" @click="$emit('open-help')">
      查看帮助文档
    </div>
    <div class="menu-item" @click="$emit('open-about')">
      关于
    </div>
  </div>
</template>

<script>
import {Delete} from '@element-plus/icons-vue'

export default {
  name: 'NodeContextMenu',
  components: {
    Delete
  },
  props: {
    visible: Boolean,
    x: Number,
    y: Number,
    nodeType: String,
    undeletable: Boolean
  },
  emits: ['change-node', 'copy', 'duplicate', 'delete', 'open-help', 'open-about', 'define-reply', 'author-info'],
  computed: {
    /**
     * 计算菜单定位样式
     * @returns {Object} 包含 left/top 的定位样式对象
     */
    position() {
      return {
        left: this.x + 'px',
        top: this.y + 'px'
      }
    }
  }
}
</script>

<style scoped>
.node-context-menu {
  position: fixed;
  background: white;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 1000;
  min-width: 220px;
}

.menu-item {
  padding: 10px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  font-size: 13px;
}

.menu-item:hover {
  background-color: #f5f7fa;
}

.menu-item.delete {
  color: #f56c6c;
}

.menu-item.delete:hover {
  background-color: #fef0f0;
}

.menu-item i {
  margin-right: 8px;
  font-size: 16px;
}

.shortcut {
  color: #909399;
  font-size: 12px;
}
</style> 
